<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min-2.6.11.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>

    <div id="app">
        <!-- 标题 头部 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">产品列表</h3>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">编号</label>

                        <!-- v-model="id" 绑定 data 属性 id -->
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入编号" v-model="id">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputName2">名字</label>
                        <!-- v-model="name" 绑定 data 属性 name -->
                        <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入名字"
                            v-model="name">
                    </div>

                    <!-- <button type="button" class="btn btn-primary">添加</button> -->
                    <!-- 
                        @click="add" 为添加 按钮绑定点击事件  
                        @click="add('参数')"   add 方法名后面 加上 圆括号 就可以在 圆括号中传递 参数
                    -->
                    <input type="button" class="btn btn-primary" value="添加" @click="add('参数')">


                    <div class="form-group">
                        <label for="exampleInputName2">搜索名称关键字</label>
                        <input type="text" class="form-control" id="exampleInputName4" placeholder="请输入搜索名字"
                            v-model="keywords">
                    </div>
                </form>
            </div>
        </div>
        <!-- 表格 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>创建时间</th>
                    <th>更多操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 
                    当 keywords 发生变化 就会 触发 v-for指令 绑定的关于 keywords 相关的操作
                    就会调用 search(keywords) 方法，当前 search 方法会返回 筛选好的 新数组
                    新数组 会被 v-for 遍历 重新渲染界面
                 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="#" @click="delBtn( item.id )">删除</a>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '宝马', ctime: new Date() },
                    { id: 2, name: '奔驰', ctime: new Date() },
                ]
            },
            methods: {
                // 添加数据方法
                add() {
                    // console.log(arguments);
                    // console.log(this.id, this.name);
                    this.list.push(
                        { id: this.id, name: this.name, ctime: new Date() }
                    )
                    // this.id = ''
                    // this.name = ''
                    // 清空 id 和 name 中的数据
                    this.id = this.name = ''

                },
                // 删除数据
                delBtn(id) {
                    // console.log('test:' + id);
                    // 拿到 数据 id 遍历 list 数据 找出需要删除的数据
                    // 数组删除 数据 .splice(需要删除的索引, 删除数据的个数)
                    /*
                    this.list.forEach((item, index) => {
                        // 比对数据 id 找出 需要删除的 数据
                        if(item.id == id) {
                            // 将找出的数据 从 list 中删除
                            this.list.splice(index, 1);
                        }
                    })
                    */

                    /*
                    // 将过滤出来的数组 保存到 temp 中， 
                    const temp = this.list.filter(item => {
                        if (item.id == id) {
                            return false
                        }
                        return true
                    })
                    // 将 过滤好的数组 赋值给 list
                    this.list = temp
                    */

                    // findIndex 获取数组中对应元素的索引
                    const index = this.list.findIndex(function (itme) {

                    })
                    this.list.splice(index, 1)

                },
                // 根据 关键词 筛选 list 数组中的数据
                search(keywoerd) {
                    // 创建新数组
                    let newList = []
                    // 遍历list
                    this.list.forEach(item => {
                        // 在 list 元素的 name属性中查找是否 包含 搜索的词组 如果包含就不等于 负一
                        if (item.name.indexOf(keywoerd) != -1) {
                            // 将 搜索出来的 元素添加到新数组中
                            newList.push(item)
                        }
                    })
                    // 返回 搜索出的新数组
                    return newList
                }

            }
        })


    </script>


</body>

</html>